<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      /**
     * 性能更好，打包体积更小，更好的ts支持，更好的代码组织，更好的逻辑抽离，更多的新功能
     * 一 Proxy和Object.defineProperty的区别？
     *  1 实现方式：Proxy是ES6新增的一种特性，使用了一种代理机制来实现响应式。而Object.defineProperty是在ES5中引入的，使用了getter和setter方法来实现。
        2 作用对象：Proxy可以代理整个对象，包括对象的所有属性、数组的所有元素以及类似数组对象的所有元素。而Object.defineProperty只能代理对象上定义的属性。
        3 监听属性：Proxy可以监听到新增属性和删除属性的操作，而Object.defineProperty只能监听到已经定义的属性的变化。
        4 性能：由于Proxy是ES6新增特性，其内部实现采用了更加高效的算法，相对于Object.defineProperty来说在性能方面有一定的优势。
      二 Vue3升级了哪些重要功能？
        1 新的API：Vue3使用createApp方法来创建应用程序实例，并有新的组件注册和调用方法。
        2 emits属性：：Vue 3的组件可以使用emits属性来声明事件。
        3 生命周期
        4 多个Fragment
        5 移除.sync
        6 异步组件的写法
      三 vue3.0编译做了哪一些优化？
        1 静态树提升： Vue 3.0 通过重写编译器，实现对静态节点（即不改变的节点）进行编译优化，使用HoistStatic功能将静态节点移动到 render 函数外部进行缓存，从而服务端渲染和提高前端渲染的性能。

        2 Patch Flag：在Vue 3.0中，编译的生成vnode会根据节点patch的标记，只对需要重新渲染的数据进行响应式更新，不需要更新的数据不会重新渲染，从而大大提高了渲染性能。

        3 静态属性提升：Vue3中对不参与更新的元素，会做静态提升，只会被创建一次，在渲染时直接复用。免去了重复的创建操作，优化内存。
        没做静态提升之前，未参与更新的元素也在render函数内部，会重复创建阶段。
        做了静态提升后，未参与更新的元素，被放置在render 函数外，每次渲染的时候只要取出即可。同时该元素会被打上静态标记值为-1，特殊标志是负整数表示永远不会用于 Diff。

        4 事件监听缓存：默认情况下绑定事件行为会被视为动态绑定（没开启事件监听器缓存），所以每次都会去追踪它的变化。开启事件侦听器缓存后，没有了静态标记。也就是说下次diff算法的时候直接使用。

        5 优化Render function：Vue 3.0的compile优化还包括：Render函数的换行和缩进、Render函数的条件折叠、Render函数的常量折叠等等。

      四 watch和watchEffect的区别？
        wattch 的使用  需要监听的参数需要放入到第一个参数
        let sum = ref(0)
        let msg = ref('你好啊')
        watch([sum, msg],(newValue, oldValue)=>{
          console.log("sum或msg变化了", newValue, oldValue),(immediate:true)
        })
        watchEffect 的使用  
        watchEffect(()=>{
          // 在函数中只要访问了属性就会自动加入到监听中
          const x1 = sum.value
          const x2 = person.value
        })

    */
    </script>
  </body>
</html>
